<template>
 <div>
   <h2>{{TrainingName}}</h2>
    <div class="infoShow"  >
        <div class="circle">
            <span>{{AllRage}}%</span>
            <span>出勤率</span>
        </div>
    </div>
   <div class="surface">
     <div class="surface-a">
       <li>日期</li>
       <li>上午</li>
       <li>下午</li>
     </div>
     <ul class="surface-b" v-for="(item,index) in Sresult" :key="index" >
       <li>{{item.CreateTime}}</li>
       <li>{{item.SWRate}}%</li>
       <li>{{item.XWRate}}%</li>
     </ul>
   </div>
 </div>
</template>

<script>
import { PAdminStatistic } from '@/providers/service'
export default {
  data () {
    return {
      AllRage: '',
      Sresult: [],
      TrainingName: ''
    }
  },
  onShow () {
    var TID = this.$route.query.TIDcql
    this.TrainingName = this.$route.query.TrainingName
    PAdminStatistic({ TID: TID }).then((res) => {
      this.AllRage = res.AllRage;
      this.Sresult = res.Sresult;
      this.Sresult.forEach(item => {
            item.CreateTime = item.CreateTime.slice(0,10).replace(/-/g,'/')
        })
    })
  }
}
</script>
<style scoped  lang="less">
h2 {
  width: 100%;
  height: 150rpx;
  line-height: 150rpx;
  font-size: 38rpx;
  text-align: center;
}
.surface {
  width: 615rpx;
  border: 2rpx solid #0c9a72;
  margin: auto;
  overflow: hidden;
  border-right: none;
  margin-top: 50rpx;
}
.surface-a li:nth-child(3) {
  width: 198rpx;
  border-right: 2rpx solid #0c9a72;
}
.surface-a li {
  float: left;
  background: #0c9a72;
  border-right: 2rpx solid #ffffff;
  color: aliceblue;
  width: 198rpx;
  text-align: center;
}
.surface-a li:nth-child(1) {
  width: 213rpx;
}
.surface-b li:nth-child(1) {
  width: 213rpx;
}
.surface-b {
  li {
    float: left;
    background: #ffffff;
    border-right: 2rpx solid #0c9a72;
    color: rgba(51, 51, 51, 1);
    width: 198rpx;
    text-align: center;
  }
}
.infoShow {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 170rpx;
  .circle {
    margin-top: 0;
    width: 158rpx;
    height: 158rpx;
    border: 2rpx solid #0c9a72;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}
ul:nth-child(Odd) li {
  background: #dff4ef;
}
</style>
